<template>
  <div class="media-report-page">
    <h2 class="content-title">媒体报道</h2>
    <div class="news-list">
      <div class="news-item" v-for="(news, index) in newsList" :key="index">
        <div class="news-image">
          <img :src="news.image" :alt="news.title">
        </div>
        <div class="news-content">
          <h3 class="news-title">{{ news.title }}</h3>
          <div class="news-meta">
            <span class="news-date">{{ news.date }}</span>
            <span class="news-source">来源: {{ news.source }}</span>
          </div>
          <p class="news-summary">{{ news.summary }}</p>
          <a :href="news.link" class="read-more" target="_blank">查看原文</a>
        </div>
      </div>
    </div>

    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="100"
        :current-page="1"
        :page-size="10">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MediaReportPage',
  data() {
    return {
      newsList: [
        {
          title: '创新引领未来 | 中空领航荣获"2023智能交通引领者奖"',
          date: '2023-05-12',
          source: '科技日报',
          image: 'http://www.sutpc.com/resource/sutpc/images/media1.jpg',
          summary: '日前，在2023年全国智能交通大会上，中空领航凭借其在交通数字孪生领域的创新成果，荣获"2023智能交通引领者奖"。科技日报记者专访了中空领航CEO王明，详细了解了公司的技术创新路径及未来发展方向...',
          link: 'javascript:;'
        },
        {
          title: '中空领航联手北京大学共建"智慧交通联合实验室"',
          date: '2023-05-08',
          source: '新华网',
          image: 'http://www.sutpc.com/resource/sutpc/images/media2.jpg',
          summary: '新华网讯：5月8日，中空领航与北京大学城市与环境学院签署战略合作协议，共建"智慧交通联合实验室"。该实验室将聚焦智能交通前沿技术研究，推动产学研深度融合，为我国智能交通事业发展提供智力支持和创新动力...',
          link: 'javascript:;'
        },
        {
          title: '低碳出行新选择 | 中空领航与共享出行平台达成战略合作',
          date: '2023-04-25',
          source: '经济观察报',
          image: 'http://www.sutpc.com/resource/sutpc/images/media3.jpg',
          summary: '经济观察报记者获悉，中空领航日前与国内多家共享出行平台达成战略合作，将共同推进绿色出行解决方案在全国范围内的落地应用。中空领航相关负责人表示，双方将融合各自在交通管理、大数据分析等方面的优势，打造更加智能、低碳、便捷的出行生态系统...',
          link: 'javascript:;'
        },
        {
          title: '专访中空领航CTO张博士："数字孪生+"开启交通治理新模式',
          date: '2023-04-18',
          source: '中国交通报',
          image: 'http://www.sutpc.com/resource/sutpc/images/media4.jpg',
          summary: '在传统交通管理模式面临巨大挑战的今天，如何利用新技术提升城市交通治理能力？中空领航CTO张博士在接受本报记者专访时表示，"数字孪生+"技术正在开启交通治理新模式。通过构建城市交通的虚拟镜像，实现对交通系统的全要素感知、全过程模拟和全场景应用，为城市交通管理者提供更加科学、精准的决策支持...',
          link: 'javascript:;'
        },
        {
          title: '中央电视台《焦点访谈》关注中空领航智慧交通解决方案',
          date: '2023-03-20',
          source: 'CCTV',
          image: 'http://www.sutpc.com/resource/sutpc/images/media5.jpg',
          summary: '3月20日晚，中央电视台《焦点访谈》栏目播出《智慧交通 畅行未来》专题片，详细报道了中空领航在智慧交通领域的创新实践。报道中，记者深入中空领航交通控制中心，实地体验了基于AI和大数据技术的智能交通管理系统，展现了科技如何改变城市交通治理模式...',
          link: 'javascript:;'
        }
      ]
    }
  }
}
</script>

<style scoped>
.media-report-page {
  max-width: 100%;
}

.content-title {
  font-size: 28px;
  color: var(--primary-color);
  margin-bottom: 30px;
  position: relative;
  padding-bottom: 15px;
}

.content-title:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: var(--secondary-color);
}

.news-list {
  margin-bottom: 40px;
}

.news-item {
  display: flex;
  padding: 25px 0;
  border-bottom: 1px solid var(--border-color);
}

.news-item:last-child {
  border-bottom: none;
}

.news-image {
  flex: 0 0 220px;
  margin-right: 30px;
  overflow: hidden;
  border-radius: 8px;
}

.news-image img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  transition: transform 0.5s;
}

.news-item:hover .news-image img {
  transform: scale(1.05);
}

.news-content {
  flex: 1;
  position: relative;
  min-height: 150px;
}

.news-title {
  font-size: 20px;
  margin-bottom: 15px;
  color: var(--text-color);
  transition: color 0.3s;
}

.news-item:hover .news-title {
  color: var(--primary-color);
}

.news-meta {
  color: #999;
  font-size: 14px;
  margin-bottom: 15px;
}

.news-date {
  margin-right: 20px;
}

.news-source {
  color: var(--secondary-color);
  font-weight: bold;
}

.news-summary {
  color: #666;
  line-height: 1.8;
  margin-bottom: 30px;
}

.read-more {
  color: var(--primary-color);
  font-weight: bold;
  position: absolute;
  bottom: 0;
  right: 0;
  transition: color 0.3s;
}

.read-more:hover {
  color: var(--secondary-color);
}

.pagination {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

@media (max-width: 768px) {
  .news-item {
    flex-direction: column;
  }
  
  .news-image {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
  }
  
  .news-content {
    padding-bottom: 40px;
  }
}
</style> 